<template>
  <div class="left-comp left-tools">
    <el-collapse v-model="activeCollapse">
      <template v-for="item in compList" :key="item.id">
        <el-collapse-item
          v-if="!item.show || (item.show && item.show.includes(type))"
          :title="item.name"
          :name="item.type"
        >
          <template #title>
            <el-icon class="caret-bottom">
              <CaretBottom />
            </el-icon>
            <el-icon class="caret-top">
              <CaretTop />
            </el-icon>
            <span class="sa-m-l-8">{{ item.name }}</span>
          </template>
          <sa-draggable
            class="sa-flex sa-flex-wrap"
            v-model="item.data"
            item-key="element"
            :group="{
              name: 'draggableName',
              pull: 'clone',
              put: false,
            }"
            ghostClass="sortable-ghost"
            fallbackClass="clone-item"
            :fallbackOnBody="true"
            :move="leftMove"
            @start="leftStart"
            @end="leftEnd"
          >
            <template #item="{ element }">
              <div class="item" :class="element.type" @click.stop="selectComp(element.type)">
                <img :src="'./static/images/shop/decorate/' + element.type + '.png'" />
                <span>{{ element.name }}</span>
              </div>
            </template>
          </sa-draggable>
        </el-collapse-item>
      </template>
    </el-collapse>
  </div>
</template>
<script>
  export default {
    name: 'left-comp',
  };
</script>
<script setup>
  /**
   * @property {String} type 页面类型
   * @property {Number} index 索引
   * @property {Number} leng 数组的长度
   * @property {String} theme 主题
   */
  import { reactive, ref } from 'vue';
  import SaDraggable from 'vuedraggable';
  import { compList, cloneComponent } from '../../data';

  const emit = defineEmits(['leftCompBack']);
  const props = defineProps(['type', 'index', 'leng', 'theme']);

  // 折叠面板展开
  const activeCollapse = reactive(['0', '1', '2', '3', '4']);

  // 拖动元素
  const saveHtml = ref();
  // 开始拖动
  function leftStart(e) {
    saveHtml.value = e.clone.innerHTML;
  }
  // 拖动
  function leftMove(e) {
    if (e.to.className.indexOf('comp-wrap') != -1) {
      e.dragged.innerHTML = `<div style="padding:0 50px;width:100%;height:50px;line-height:50px;background:#f00">新添加的元素</div>`;
    } else {
      return false;
    }
  }
  // 结束拖动赋值
  function leftEnd(e) {
    if (e.to.className.indexOf('comp-wrap') != -1) {
      e.item.innerHTML = saveHtml.value;
      let type = e.item.classList[1];
      emit('leftCompBack', {
        trigger: 'drag',
        type: type,
        index: e.newIndex,
        template: cloneComponent(type, props.theme),
      });
    }
  }

  // 选择组件
  function selectComp(type) {
    let index;
    if (props.index == 0 || props.index > 0) {
      index = props.index;
      index++;
    } else {
      index = props.leng;
    }
    emit('leftCompBack', {
      trigger: 'click',
      type: type,
      index: index,
      template: cloneComponent(type, props.theme),
    });
  }
</script>
